<template>
	<view class="cart-wrapper">
		<!-- 循环的购物车数据 -->
		<view class="goods-item" v-for="(item, key, index) in goods" :key="index">
			<!-- 左边的图标 -->
			<view class="goods-status">
				<icon type="success" 
				size="16" 
				:color="item.selected ? `red` : `white`"
				@click="changeStatus(key)"></icon>
			</view>
			<!-- 图片 -->
			<navigator :url="`/pages/goods_detail/index?goods_id=${item.goods_id}`">
				<image :src="item.goods_small_logo" mode="aspectFill"></image>
			</navigator>
			<!-- 右边的商品信息 -->
			<view class="goods-info">
				<!-- 标题 -->
				<navigator url="/pages/goods_detail/index?goods_id=xx" class="goods-title">
					{{item.goods_name}}
				</navigator>
				<!-- 价格和按钮列表 -->
				<view class="goods-info-bottom">
					<view class="goods-price">
						￥{{item.goods_price}}
					</view>
					<view class="goods-action">
						<view class="calc" @click="handleCalc(-1, key)">
							-
						</view>
						<input :value="item.number" @input="handleInput($event, key)" type="number"/>
						<view class="calc" @click="handleCalc(1, key)">
							+
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部的总计 -->
		<view class="footer">
			<view class="all-select" @click="changeAllSelect">
				<icon type="success" 
				size="16" 
				:color="allSelected ? `red` : `white`"></icon>
				全选
			</view>
			<view class="all-price">
				合计：<text>￥{{allPrice}}</text>
			</view>
			<button type="warn" @click="navigatorOrder">去结算({{count}})</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 购物车商品列表
				goods: {},
				// 件数总数
				count: 0
			}
		},
		watch: {
			// 深度监听商品值的变化
			goods: {
				deep: true,
				handler(){
					console.log(this.goods)
				}
			}
		},
		// 计算属性
		computed: {
			// 是否全部选中
			allSelected(){
				// 循环对象
				const keys = Object.keys(this.goods);
				// 记录是否有选项状态为false.默认全部都是选中的
				let selected = true;
				
				// 循环goods列表
				keys.forEach(id => {
					// 为false后，阻止循环后面的判断
					if(selected === false) {return;}
					// 有值等于false，直接赋值给selected
					if(this.goods[id].selected === false){
						selected = false;
					}
				})
				return selected;
			},
			// 总价
			allPrice(){
				let price = 0;
				// 初始化count总数
				this.count = 0;
				
				// 循环对象
				const keys = Object.keys(this.goods);
				// 循环goods列表
				keys.forEach(id => {
					// item是当前的元素
					const item = this.goods[id];
					
					if(item.selected){
						// 单价乘以数量
						price += item.goods_price * item.number;
						// 总件数
						this.count += item.number;
					}
				})
				
				return price;
			},
		},
		// 每次进入该页面都要获取本地的数据
		onShow(){
			// 处理原来的dom元素绑定的事件，清空原来所有的dom元素
			this.goods = {};
			// 获取本地的数据
			this.goods = uni.getStorageSync("goods") || {};
		},
		// 页面离开之后一次性把goods的数据保存到本地
		onHide(){
			uni.setStorageSync("goods", this.goods);
		},
		methods: {
			// 修改状态
			changeStatus(id){
				// 把选中状态反选
				this.goods[id].selected = !this.goods[id].selected;
			},
			// 修改全选，修改所有元素的选中状态
			changeAllSelect(){
				// 放到外面不会受到循环的影响
				const selected = !this.allSelected;
				// 循环商品列表
				Object.keys(this.goods).forEach(id => {
					// 根据全选的状态来取反
					this.goods[id].selected = selected;
				});
			},
			// 监听数量输入框的变化
			handleInput(event, id){
				// 输入框的值
				const value = event.detail.value;
				// 修改当前商品的数量
				this.goods[id].number = +value;
			},
			// 计算数量,value是加减1，id是当前商品的id
			handleCalc(value, id) {
				const item = this.goods[id];
				
				item.number += value;
				
				// 如果商品的数量等于0，删除该商品
				if(item.number === 0){
					// 对话
					uni.showModal({
						title: '提示',
						content: '是否删除该商品',
						success: (res) => {
							// 如果res.confirm是true就代表点击确定
							if (res.confirm) {
								// 删除该商品，delete不会引起页面的刷新
								delete this.goods[id];
								// 使用赋值的方式让页面刷新
								this.goods = {...this.goods};
							} else if (res.cancel) {
								// 如果点击了取消，就把商品的数量设置为1
								item.number = 1;
							}
						}
					})					
				}
			},
			// 跳转到订单页
			navigatorOrder(){
				uni.navigateTo({
					url: "/pages/order/index"
				});
			}
		}
	}
</script>

<style lang="less">
.goods-item{
	padding: 20rpx 30rpx;
	display: flex;
	height: 191rpx;
	align-items: center;
	border-bottom: 1px #eee solid;
	
	.goods-status{
		margin-right: 20rpx;
		icon{
			border:1px #999 solid;
			border-radius: 50%;
		}
	}
	
	image {
		width: 191rpx;
		height: 191rpx;
		display: block;
		margin-right: 30rpx;
		flex-shrink: 0;
	}
	
	.goods-info{
		display: flex;
		flex: 1;
		height: 100%;
		flex-direction: column;
		justify-content: space-between;
		
		
		.goods-title{
			font-size: 14px;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		
		.goods-info-bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.goods-price{
				color: red;
			}
			
			.goods-action{
				display: flex;
				align-items: center;
			}
			
			.calc{
				width: 16px;
				height: 16px;
				border-radius: 50%;
				font-size: 12px;
				border: 1px #333 solid;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: 1;
			}
			
			input{
				height: 18px;
				width: 100rpx;
				font-size: 12px;
				text-align: center;
				background: #fff;
			}
		}
	}
}

.cart-wrapper{
	padding-bottom: 83rpx;
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 82rpx;
		border-top: 1px #eee solid;
		background: #fff;
		display: flex;
		align-items: center;
		font-size: 14px;
		box-sizing: border-box;
		padding: 0 30rpx;
		
		.all-select {
			display: flex;
			align-items: center;
			font-size: 12px;
			margin-right: 30rpx;
			icon{
				margin-right: 20rpx;
				border: 1px #999 solid;
				border-radius: 50%;
			}
		}
		
		.all-price{
			flex: 1;
			text{
				color: red
			}
		}
		
		button{
			width: 220rpx;
			height: 52rpx;
			line-height: 53rpx;
			font-size: 12px;
			border-radius: 50px;
			box-sizing: border-box;
		}
	}
}

</style>
